import classNames from 'classnames';
import { useState } from 'react';
import { format } from 'date-fns';
import { useTranslation } from 'react-i18next';
import Button from 'src/component/Button';
import { Action } from 'src/constant/Order';
// import { UserOrder } from 'src/model/Order';
import { bnFormat } from 'src/util/bigNumber';
import RedirectModal from './RedirectModal'
import style from './Card.module.scss';

type UserOrder = any

type Props = {
  data: UserOrder[];
  onAction: (id: string, action: Action) => void;
};

const Card = ({ data, onAction }: Props) => {
  const { t } = useTranslation();
  const [open, setOpen] = useState<boolean>(false);

  const elementMapFunction = (order: UserOrder, index: number, array: UserOrder[]) => (
    <div key={order.FID}>
      <div className={style.item}>
        <span className={style.itemLabel}>单价</span>
        {/* {`${bnFormat(order.FPrice)} ${order.FCNY}`} */}
        {`${order.FPrice} ${order.FCNY}`}
      </div>
      <div className={classNames(style.item, style.itemGap)}>
        <span className={style.itemLabel}>数量</span>
        {`${bnFormat(order.FQuantity)} ${order.FGoods}`}
      </div>
      <div className={classNames(style.item, style.itemGap)}>
        <span className={style.itemLabel}>限额</span>
        {`${bnFormat(order.FMin)} - ${bnFormat(
          order.FMax,
        )} ${order.FCNY}`}
      </div>
      <div className={classNames(style.item, style.itemGap)}>
        <span className={style.itemLabel}>收/付款方式</span>
        {order.FWay}
        {/* {`${order.bankAccount.bankName}-${order.bankAccount.name}`} */}
      </div>
      <div className={classNames(style.item, style.itemGap)}>
        <div className={style.itemLabel}>状态</div>
        <div className={style.primaryColor}>
          {order.FState}
          {/* {order.status === 'open' &&
            order.suspendedAt &&
            t('myTrade.desc.statusSuspendDate', {
              date: format(Date.parse(order.suspendedAt), 'yyyy/MM/dd HH:mm'),
            })} */}
        </div>
      </div>
      <div className={style.itemControlls}>
        {order.FState == '上架中' && (
          <>
            <Button
              appearance="secondary"
              size="small"
              onClick={() => onAction(order.FID, Action.Suspend)}
            >
              下架
            </Button>
            <Button
              appearance="secondary"
              size="small"
              onClick={() => onAction(order.FID, Action.Edit)}
            >
              编辑
            </Button>
          </>
        )}
        {order.FState == '下架中' && (
          <>
            <Button
              appearance="secondary"
              size="small"
              onClick={() => onAction(order.FID, Action.Edit)}
            >
              编辑
            </Button>
            <Button
              appearance="secondary"
              size="small"
              onClick={() => onAction(order.FID, Action.Unsuspend)}
            >
              上架
            </Button>

            <Button
              appearance="secondary"
              size="small"
              onClick={() => onAction(order.FID, Action.Delete)}
            >
              删除
            </Button>
          </>
        )}
      </div>
      <div className={classNames(style.divider, { [style.hide]: index >= array.length - 1 })} />
      <RedirectModal open={open} onClose={() => setOpen(false)} />
    </div>
  );

  return <div>{data.map(elementMapFunction)}</div>;
};

export default Card;
